import { createStyles } from 'antd-style';
import { rgba } from 'polished';

export const useStyles = createStyles(
  (
    { cx, css, token, stylish },
    {
      alwaysShowActions,
    }: {
      alwaysShowActions?: boolean;
    } = {},
  ) => {
    const actions = cx(css`
      cursor: pointer;

      position: absolute;
      z-index: 1;
      inset-block-start: 0;
      inset-inline-end: 0;

      opacity: ${alwaysShowActions ? 1 : 0};
    `);

    return {
      actions,
      borderless: stylish.variantBorderlessWithoutHover,
      filled: cx(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),
      image: css`
        display: flex;
        align-items: center;
        justify-content: center;

        width: auto;
        height: auto;
      `,
      mask: cx(
        stylish.blur,
        css`
          backdrop-filter: blur(8px);
        `,
      ),
      outlined: stylish.variantOutlinedWithoutHover,
      preview: css`
        img {
          width: 100%;
        }
      `,
      root: css`
        cursor: pointer;
        user-select: none;

        position: relative;

        overflow: hidden;

        width: fit-content;
        border-radius: ${token.borderRadius}px;

        line-height: 1;

        &:hover {
          .${actions} {
            opacity: 1;
          }
        }
      `,
      toolbar: cx(
        stylish.blur,
        stylish.variantOutlinedWithoutHover,
        css`
          padding: 4px;
          border-color: ${token.colorFillTertiary};
          border-radius: ${token.borderRadiusLG}px;
          background: ${rgba(token.colorBgMask, 0.5)};
        `,
      ),

      wrapper: css`
        position: relative;
        overflow: hidden;
        max-width: 100%;
        height: auto;
      `,
    };
  },
);

export const FALLBACK_DARK =
  '';
export const FALLBACK_LIGHT =
  '';
